<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /**
         * 方法名：ajax
         * 参数1：路径
         * 参数2：数据
         * 参数3：回调函数
         * */
        // 1. 将上面文件进行优化
        // 2. 将get、post 请求方式分为2个不同的函数 
        function ajax(url, data, callback, method = 'get') {
            let x = new XMLHttpRequest();

            // let str = `?`;

            // // for(let item in data){
            // //     console.log(item);
            // // }

            // let arr = Object.keys(data);
            // // console.log(arr);

            // Object.keys(data).map(item=>{
            //     // console.log(item);
            //     str+=`${item}=${data[item]}&`;
            // })

            // // 截取字符串
            // str =str.substring(0,str.length-1);

        //    str = str.slice(0,-1)

        //     console.log(str); //?c=a&age=18

            let arr = Object.keys(data);
            let newArr = arr.map(item => `${item}=${data[item]}`);
            let str = newArr.join('&');
            if (method === 'get') {
                x.open(method, url + '?' + str);
                x.send();
            }else{
                x.open(method,url);
                x.setRequestHeader('Content-type','application/x-www-form-urlencoded')
                x.send(str)
            }
            x.onreadystatechange = function () {
                if (x.readyState === 4) {
                    if (x.status >= 200 && x.status < 300) {
                        let obj = x.response;
                        callback(obj)
                    }
                }
            }
        }
        ajax('http://localhost/postServer', { name: "laowang", age: 18 }, function (data) {
            console.log(data);
        }, 'post')

    </script>
</body>

</html>